{extend name="base/common"}

{block name="style"}
<style>
    .mail-box .mail-ontact{
        width: 150px;
        min-width: 150px;
        overflow: hidden;
    }
    .mail-box .mail-subject{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 124px !important;
        min-width: 124px;
    }
    .mail-subject-div{
        width: 100px;
        max-width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mail-box .mail-main{
        width: calc(100% - 460px);
        position: absolute;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mail-date{
        width: 160px;
        min-width: 160px;
        overflow: hidden;
    }
    @media only screen and (max-width: 550px){
        .mail-date{
            display: none;
        }
    }
    .list_banner {width: 80px}
    .list_type {width: 80px}
</style>
{/block}

{block name="page-header"}

{/block}

{block name="main"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="mail-box-header">
            <h2>公共场所服务</h2>
        </div>
        <div class="mail-box">
            <table class="table table-hover table-mail">

                <thead>
                <tr>
                    <th></th>
                    <th>创建时间</th>
                    <th>申请用户</th>
                    <th>申请时间</th>
                    <th>总金额</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {volist name="data" id="vo"}
                <tr class="read">
                    <td class="check-mail">
                        <input type="checkbox" class="i-checks ids" name="ids[]" value="{$vo.time}">
                    </td>
                    <td class="mail-subject">
                        {$vo.time}
                    </td>
                    <td>
                        {$vo.user}
                    </td>
                    <td>
                        {$vo.day}
                    </td>
                    <td>
                        {$vo.price}
                    </td>
                    <td>
                        {$vo.status}
                    </td>
                    <td>
                        <a  href="{:Url('cancel','create_time='.$vo.time.'&&type='.$vo.type)}" >取消</a>
                        <a data-toggle="modal" href="#modal-form" onclick="showP('')">查看凭证</a>
                    </td>
                </tr>
                {/volist}
                </tbody>
            </table>
            <div class="btn-group pull-right"></div>
        </div>
    </div>
</div>
<div id="modal-form" class="modal fade" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="form-horizontal" method="post" action="update">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h3 class="modal-title text-center">查看凭证</h3>
                </div>
                <div class="modal-body">
                    <div class="form-group">


                    </div>

                </div>
            </form>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="/admin/js/plugins/iCheck/icheck.min.js"></script>
<script>
    $(document).ready(function(){
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
        $(".check-all").on("ifChanged",function(){
            $("tbody").find(".ids").iCheck("toggle");
        });
    });

    function showP(data) {
        consle.log(data)
    }
   /* <div class="col-sm-4"></div>*/
</script>
{/block}